// 网格项组件
import 'package:flutter/material.dart';
import 'package:flutter_deer/database/beans/pay_type_model.dart';
import 'package:flutter_deer/res/colors.dart';
import 'package:flutter_deer/ui/cashier/provider/cashier_page_provider.dart';
import 'package:get/get.dart';

class CashierPayTypeItem extends StatefulWidget {
  const CashierPayTypeItem({
    super.key,
    required this.item,
    required this.onTap,
    this.onLongPress, // 新增长按回调参数
  });
  final PayTypeModel item;
  final VoidCallback onTap;
  final VoidCallback? onLongPress; // 新增长按回调属性

  @override
  _CashierPayTypeItemState createState() => _CashierPayTypeItemState();
}

class _CashierPayTypeItemState extends State<CashierPayTypeItem> {
  CashierPageProvider mProvider = Get.find<CashierPageProvider>();

  bool _isHovering = false;
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      // 根据不同状态设置不同的样式
      final isSelected = mProvider.mPayTypeRx.value?.paymentModeId == widget.item.paymentModeId;
      final isHovering = _isHovering && !isSelected;
      final isPressed = _isPressed && !isSelected;

      Color backgroundColor;
      Color titleColor;
      Color descriptionColor;

      if (isSelected) {
        // 选中状态
        backgroundColor = Colours.blue4B7EFE;
        titleColor = Colors.white;
        descriptionColor = Colors.white;
      } else if (isPressed || isHovering) {
        // 按压状态
        backgroundColor = Colors.grey.withOpacity(0.5);
        titleColor = Colors.black;
        descriptionColor = Colors.grey;
      } else {
        // 默认状态
        backgroundColor = Colours.line;
        titleColor = Colors.black;
        descriptionColor = Colors.grey;
      }

      return MouseRegion(
        onEnter: (_) => setState(() => _isHovering = true),
        onExit: (_) => setState(() {
          _isHovering = false;
          _isPressed = false;
        }),
        child: GestureDetector(
          onTapDown: (_) => setState(() => _isPressed = true),
          onTapUp: (_) => setState(() => _isPressed = false),
          onTapCancel: () => setState(() => _isPressed = false),
          onTap: widget.onTap,
          onLongPress: widget.onLongPress, // 添加长按回调
          child: AnimatedContainer(
            duration: Duration(milliseconds: 200),
            decoration: BoxDecoration(
              color: backgroundColor,
              borderRadius: BorderRadius.circular(4),
              boxShadow: isSelected || isHovering
                  ? [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.3),
                        blurRadius: 4,
                        offset: Offset(0, 2),
                      ),
                    ]
                  : [],
            ),
            padding: EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  widget.item.paymentName,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: titleColor,
                  ),
                ),
                SizedBox(height: 4),
                Text(
                  widget.item.paymentName,
                  style: TextStyle(
                    fontSize: 12,
                    color: descriptionColor,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                // 选中状态指示器
              ],
            ),
          ),
        ),
      );
    });
  }
}
